<script setup>
import {
  getCoursetestApi, //一级分类
  getClassifyApi, //三级分类
  getHomeSlideshowApi, //首页轮播图
  getTopTabApi, //头部tab
  getTopOneTabApi, //首页头部第一个tab
} from '@/utils/api'
import { ref, onMounted, reactive } from 'vue'
const show = ref(true)
const show1 = ref(false)
const show2 = ref(false)
let titles = ref('')
let id = ref('')
let pitchOnId = ref('')
let oneId = ref('')
let twoId = ref('')
let flag = ref('')
const active = ref(0);

const num = ref(0)

let list = reactive([])
let threeLists = reactive(
  {
    list: [],
    HomeSlideshow: [],
    oneTab: [],
    topTab: []
  }
)

const getCoursetest = async () => {
  const res = await getCoursetestApi()
  list.push(...res.data)

};

const getClassify = async (id) => {
  console.log(id);
  const res = await getClassifyApi(id)
  console.log(res);
  threeLists.list = res.data

};
// 首页轮播图
const getHomeSlideshow = async (id, pid) => {
  const res = await getHomeSlideshowApi({ id, pid: 4 })
  console.log(res);
  threeLists.HomeSlideshow = res.data
};
// 头部tab
const getTopTab = async (id) => {
  const res = await getTopTabApi(id)
  console.log(pitchOnId);
  console.log(res);
  threeLists.topTab = res.data
}
// 首页头部第一个tab
const getTopOneTab = async (id) => {
  const res = await getTopOneTabApi(id)
  threeLists.oneTab = res.data
  // console.log(threeLists.oneTab.model_name);
}
onMounted(() => {
  getCoursetest()

});
// 点击一级
const SelectLevel = (item) => {
  show.value = false
  show1.value = true
  titles.value = item.title
  id.value = item.id
  oneId.value = item.id
  getClassify(id.value)
}
// 点击二级
const secondLevel = (i) => {
  show1.value = false
  show2.value = true
  console.log(i);
  twoId.value = i
}
// 点击三级
const threeLevel = (item) => {
  num.value = 1
  pitchOnId.value = item.major_id
}
// 点击确定
const ChooseComplete = () => {
  show2.value = false
  getHomeSlideshow(id.value, pitchOnId.value)
  flag.value = false
  localStorage.setItem('flag', flag.value)
  getTopTab(id.value)
  getTopOneTab(id.value)
}
// 选择
const showSelect = () => {
  flag.value = true
  localStorage.setItem('flag', flag.value)
}
</script>

<template>
  <div class="course-test-box">
    <header class="course-test-top">
      <span class="aaa" @click="showSelect"><span v-if="titles === ''">选择考试</span><span>{{ titles }}</span>
        <van-icon name="arrow" />
      </span>
      <div>
        <span>
          <van-icon name="search" />
        </span>
        <span class="icon2">
          <van-icon name="service-o" />
        </span>
      </div>
    </header>
    <!-- 一级 -->
    <van-popup v-model:show="show" position="bottom" round :style="{ height: '60%' }" v-if="flag === true">
      <div class="course-test-one">
        <div class="course-test">选择考试</div>
        <div class="course-test-text" :class="item.id === oneId ? 'active' : ''" v-for="item in list" :key="item.id"
          @click="SelectLevel(item)">
          <div class="title">{{ item.title }}</div>
          <div class="brief">{{ item.brief }}</div>
        </div>
      </div>
    </van-popup>
    <!-- 二级 -->
    <van-popup v-model:show="show1" position="bottom" round :style="{ height: '40%' }">
      <div class="course-test-two">
        <div class="course-test">{{ titles }}</div>
        <div @click="secondLevel(1)" :class="1 === twoId ? 'active' : ''" class="course-test-text two">在校生</div>
        <div @click="secondLevel(2)" :class="2 === twoId ? 'active' : ''" class="course-test-text two">在职</div>
      </div>
    </van-popup>
    <!-- 三级 -->
    <van-popup v-model:show="show2" position="bottom" round :style="{ height: '60%' }">
      <div class="course-test-two">
        <div class="course-test awwa"><span></span>{{ titles }} <span class="sp1"><span v-if="num === 1" class="isOk"
              @click="ChooseComplete">完成</span></span></div>
        <div class="course-test-text" v-for="item in threeLists.list"
          :class="item.major_id === pitchOnId ? 'active' : ''" :key="item.id" @click="threeLevel(item)">
          <div class="two">{{ item.major_name }}</div>
        </div>
      </div>
    </van-popup>
    <!-- 头部tab -->
    <van-tabs v-model:active="active">
      <van-tab :title="threeLists.oneTab.model_name">
         <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in threeLists.HomeSlideshow" :key="item.id">
            <img class="home-slideshow" :src="item.banner_img" alt="">
          </van-swipe-item>
        </van-swipe>
      </van-tab>
      <van-tab v-for="item in threeLists.topTab" :title="item.title" :key="item.id">
         <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in threeLists.HomeSlideshow" :key="item.id">
            <img class="home-slideshow" :src="item.banner_img" alt="">
          </van-swipe-item>
        </van-swipe>
      </van-tab>
    </van-tabs>
 

  </div>
</template>

<style scoped>
.course-test {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.course-test-top {

  margin-top: 10px;
  display: flex;
  align-content: center;
  height: 50px;
  justify-content: space-between;
  font-size: 40px;
}

.icon2 {
  margin-right: 20px;
  margin-left: 20px;
}

.aaa {
  margin-left: 20px;
}

.two {
  line-height: 90px;
}

.course-test-text {
  width: 80%;
  background: #f8f8f5;
  margin: 20px auto 0;
  border-radius: 50px;
  height: 90px;
  font-size: 30px;
  text-align: center;
  overflow: hidden;
  border: 1px solid #e7e7e5;
}

.brief {
  font-size: 24px;
}

.title {
  margin-top: 15px;
}

.awwa {
  width: 80%;
  /* height: 60px; */
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.active {
  background: #f15a24;
  color: #fff;
}

.isOk {
  padding: 10px 20px;
  background-color: #f15a24;
  color: #fff;
  font-size: 24px;
  border-radius: 50px;
}

.sp1 {
  width: 88px;
  /* height: 24px; */
}

.home-slideshow {
  width: 100%;
  height: 280px;
}
</style>
